<template>
  <div class="page-chosemeeting">
    <!-- 筛选区域（可折叠） -->
    <div class="filter-section" :class="{ 'filter-collapsed': isFilterCollapsed }">
      <div class="filter-header" @click="toggleFilter">
        <span>筛选条件</span>
        <el-icon class="collapse-icon">
          <arrow-down v-if="!isFilterCollapsed" />
          <arrow-up v-else />
        </el-icon>
      </div>

      <div v-show="!isFilterCollapsed" class="filter-content">
        <el-form class="filter-form" :inline="true">
          <el-form-item label="会议室位置">
            <el-input v-model="filterParams.location" clearable placeholder="请选择会议室位置" @keyup.enter="handleSearch" />
          </el-form-item>
          <el-form-item class="date-item" label="日期">
            <el-date-picker
              v-model="filterParams.date"
              :disabled-date="disablePastDates"
              format="YYYY-MM-DD"
              placeholder="选择日期"
              style="width: 160px"
              type="date"
              value-format="YYYY-MM-DD"
              @change="handleSearch"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
          </el-form-item>
        </el-form>
        <!-- 已选择会议室卡片，嵌入筛选条件卡片内 -->
        <div v-if="confirmedRoom" class="selected-room-card">
          <div class="selected-room-row">
            <el-icon class="selected-room-icon"><location /></el-icon>
            <span class="selected-room-name">{{ confirmedRoom.roomName }}</span>
            <el-button class="selected-room-reset" type="text" @click="resetSelection">重新选择</el-button>
          </div>
          <div class="selected-room-info">
            <span v-if="confirmedRoom.positionDescription" class="selected-room-meta">
              <el-icon><location /></el-icon>
              {{ confirmedRoom.positionDescription }}
            </span>
            <span v-if="confirmedRoom.capacity" class="selected-room-meta">
              <el-icon><user /></el-icon>
              {{ confirmedRoom.capacity }}人
            </span>
            <span v-if="confirmedRoom.equipment" class="selected-room-meta">
              <el-icon>
                <svg height="14" viewBox="0 0 1024 1024" width="14">
                  <path
                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.2 0-372-166.8-372-372S306.8 140 512 140s372 166.8 372 372-166.8 372-372 372zm0-672c-165.7 0-300 134.3-300 300s134.3 300 300 300 300-134.3 300-300-134.3-300-300-300zm0 540c-132.5 0-240-107.5-240-240s107.5-240 240-240 240 107.5 240 240-107.5 240-240 240z"
                  />
                </svg>
              </el-icon>
              {{ formatEquipment(confirmedRoom.equipment) }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 会议室列表展示区域 -->
    <div v-if="loading" class="loading-rooms">
      <el-skeleton animated :rows="2" />
    </div>

    <div v-else-if="roomList.length === 0" class="no-rooms">
      <el-empty description="没有找到符合条件的会议室" />
    </div>

    <!-- 会议室列表 -->
    <div v-else-if="!confirmedRoom" class="room-list">
      <div class="room-list-container">
        <div
          v-for="room in roomList"
          :key="room.id"
          class="room-item"
          :class="{
            'room-unavailable': hasOverlap(room),
            'room-selected': room.id === props.modelValue,
          }"
          @click="selectRoom(room)"
        >
          <!-- 会议室信息区域：优化为更紧凑的布局 -->
          <div class="room-info">
            <div class="room-info-left">
              <div class="room-title">
                {{ room.roomName }}
                <span v-if="hasOverlap(room)" class="conflict-tag">使用中</span>
                <span v-if="room.isApproval === '1'" class="approval-tag">需审批</span>
                <!-- <span class="status-tag" :class="room.openStatus === '空闲' ? 'status-idle' : 'status-unopen'">
                  {{ room.openStatus }}
                </span> -->
              </div>
              <div class="room-meta">
                <span v-if="room.positionDescription" class="room-location">
                  <el-icon><location /></el-icon>
                  {{ room.positionDescription }}
                </span>
                <span v-if="room.capacity" class="room-capacity">
                  <el-icon><user /></el-icon>
                  {{ room.capacity }}人
                </span>
              </div>
            </div>
            <div class="room-info-right">
              <div v-if="room.equipment" class="room-equipment">
                {{ formatEquipment(room.equipment) }}
              </div>
              <el-button v-if="room.id === props.modelValue" type="primary" @click="confirmSelection">确认选择</el-button>
            </div>
          </div>

          <!-- 紧凑时间线区域 -->
          <div class="timeline-wrapper">
            <!-- 时间刻度标记 -->
            <div class="time-marks">
              <span v-for="hour in timelineHours" :key="hour" class="time-mark" :style="{ left: `${calculateTimePosition(hour, 0)}%` }">
                {{ hour }}
              </span>
            </div>

            <!-- 时间线 -->
            <div class="timeline">
              <!-- 时间轴背景 -->
              <div class="timeline-bg"></div>

              <!-- 时间点 -->
              <div
                v-for="hour in timelineHours"
                :key="`dot-${hour}`"
                class="time-dot"
                :style="{ left: `${calculateTimePosition(hour, 0)}%` }"
              ></div>

              <!-- 已占用时间块 -->
              <div
                v-for="(activity, index) in room.activityInfos || []"
                :key="`activity-${index}`"
                class="timeline-occupied"
                :style="{
                  left: `${calculateTimePosition(parseInt(activity.startTime.substr(11, 2)), parseInt(activity.startTime.substr(14, 2)))}%`,
                  width: `${
                    calculateTimePosition(parseInt(activity.endTime.substr(11, 2)), parseInt(activity.endTime.substr(14, 2))) -
                    calculateTimePosition(parseInt(activity.startTime.substr(11, 2)), parseInt(activity.startTime.substr(14, 2)))
                  }%`,
                }"
                :title="`${activity.title || '会议预约'}: ${activity.startTime.substr(11, 5)}-${activity.endTime.substr(11, 5)}`"
              ></div>

              <!-- 选中的时间段 -->
              <div
                v-if="props.startTime && props.endTime"
                class="timeline-selected"
                :style="{
                  left: `${calculateTimePosition(dayjs(props.startTime).hour(), dayjs(props.startTime).minute())}%`,
                  width: `${
                    calculateTimePosition(dayjs(props.endTime).hour(), dayjs(props.endTime).minute()) -
                    calculateTimePosition(dayjs(props.startTime).hour(), dayjs(props.startTime).minute())
                  }%`,
                }"
              ></div>
            </div>
          </div>

          <!-- 当前可用时间信息 - 紧凑显示 -->
          <div class="room-time-info">
            <template v-if="room.activityInfos && room.activityInfos.length > 0">
              <div class="time-info">
                <span class="time-label">已预约:</span>
                <span v-for="(activity, index) in room.activityInfos" :key="index" class="time-slot">
                  {{ activity.startTime.substr(11, 5) }}-{{ activity.endTime.substr(11, 5) }}
                </span>
              </div>
            </template>
            <template v-else>
              <div class="time-info available">全天可用</div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ArrowDown, ArrowUp, Location, User } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref, watch } from 'vue'

// 定义会议活动接口
interface ActivityInfo {
  id: string
  title: string
  startTime: string
  endTime: string
  type: string
  [key: string]: any
}

// 定义会议室接口
interface ConferenceRoom {
  id: string | number
  roomName: string
  capacity?: string | number
  positionDescription?: string
  area?: string | number
  equipment?: string
  description?: string
  isApproval?: string
  activityInfos?: ActivityInfo[]
  openStatus?: string
  [key: string]: any
}

// 定义时间区间接口
interface TimeInterval {
  startTime: string
  endTime: string
}

const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: '',
  },
  startTime: {
    type: String,
    default: '',
  },
  endTime: {
    type: String,
    default: '',
  },
  editActivityId: {
    type: [String, Number],
    default: '', // 当前正在编辑的预约ID，用于识别编辑模式
  },
})

const emit = defineEmits(['update:modelValue', 'room-selected'])

// 筛选区折叠状态
const isFilterCollapsed = ref(false)

// 切换筛选区折叠状态
const toggleFilter = () => {
  isFilterCollapsed.value = !isFilterCollapsed.value
}

// 时间配置
const timeConfig = ref<TimeInterval>({
  startTime: '08:00', // 默认值，将被API返回的配置覆盖
  endTime: '18:00',
})

// 时间线小时刻度 - 将根据配置动态生成
const timelineHours = ref<number[]>([])

// 过滤参数
const filterParams = reactive({
  location: '',
  date: dayjs().format('YYYY-MM-DD'), // 默认为当天
})

const loading = ref(false)
const roomList = ref<ConferenceRoom[]>([])

// 获取字典配置
const fetchTimeConfig = async () => {
  try {
    // 导入API
    const { getDictionaryByKey, parseDictionaryJson } = await import('~/src/api/dictionary')

    // 调用API获取时间区间配置
    const res = await getDictionaryByKey('interval')

    const response = res as any
    if (response && response.code === 0 && response.result) {
      // 从接口返回数据中提取时间配置
      let timeIntervalData: any = null

      if (response.result.dataJson) {
        // 使用增强后的解析函数处理字典数据
        timeIntervalData = parseDictionaryJson(response.result.dataJson)
        console.log('解析后的时间配置:', timeIntervalData)
      } else if (response.result.startTime && response.result.endTime) {
        // 直接使用result中的时间字段
        timeIntervalData = response.result
      }

      // 更新时间配置
      if (timeIntervalData && typeof timeIntervalData === 'object' && 'startTime' in timeIntervalData && 'endTime' in timeIntervalData) {
        timeConfig.value = {
          startTime: timeIntervalData.startTime as string,
          endTime: timeIntervalData.endTime as string,
        }
      }

      // 生成时间线刻度
      generateTimelineHours()
    } else {
      console.warn('获取时间配置失败，使用默认配置')
      // 使用默认配置生成时间线
      generateTimelineHours()
    }
  } catch (error) {
    console.error('获取时间配置出错:', error)
    // 使用默认配置生成时间线
    generateTimelineHours()
  }
}

// 根据配置生成时间线刻度
const generateTimelineHours = () => {
  const hours: number[] = []

  // 安全解析开始和结束时间，提供默认值防止错误
  const startTimeStr = timeConfig.value?.startTime || '08:00'
  const endTimeStr = timeConfig.value?.endTime || '18:00'

  const startTimeParts = startTimeStr.split(':')
  const endTimeParts = endTimeStr.split(':')

  const startHour = parseInt(startTimeParts[0] || '8')
  const endHour = parseInt(endTimeParts[0] || '18')

  // 生成小时刻度
  for (let hour = startHour; hour <= endHour; hour++) {
    hours.push(hour)
  }

  timelineHours.value = hours
}

// 监听时间变化，重新获取会议室列表
watch(
  [() => props.startTime, () => props.endTime],
  () => {
    if (props.startTime && props.endTime && timelineHours.value.length > 0) {
      // 提取日期部分
      const startDate = props.startTime.split(' ')[0]
      filterParams.date = startDate
      fetchRooms()
    }
  },
  { immediate: false } // 修改为false，等待timeConfig初始化后再触发
)

// 获取会议室列表
const fetchRooms = async () => {
  if (!props.startTime || !props.endTime) return

  loading.value = true
  try {
    // 导入 API
    const { getAllConferenceRooms } = await import('~/src/api/conferenceRoom')

    // 调用 API 获取会议室列表，传入过滤参数
    const res = await getAllConferenceRooms({
      location: filterParams.location,
      date: filterParams.date,
    })

    const response = res as any
    if (response && response.code === 0) {
      // 直接使用返回的数组，确保每个会议室都有activityInfos属性
      // 根据用户提供的数据格式进行适配
      const rooms = Array.isArray(response.result) ? response.result : response.result?.rows || []

      // 确保每个房间都有activityInfos字段，并只显示空闲的会议室
      roomList.value = rooms
        .filter((room) => room.openStatus === '空闲') // 只显示空闲的会议室
        .map((room) => ({
          ...room,
          activityInfos: room.activityInfos || [],
        }))
    } else {
      ElMessage.warning('获取会议室列表失败')
    }
  } catch (error) {
    console.error('获取会议室出错:', error)
    ElMessage.error('网络错误，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 检查房间是否与当前选择的时间有冲突
const hasOverlap = (room: ConferenceRoom) => {
  return checkTimeOverlap(room.activityInfos || [])
}

// 格式化会议室设备信息
const formatEquipment = (equipment: string) => {
  if (!equipment) return ''
  return equipment.split(',').join('、')
}

// 查询按钮处理
const handleSearch = () => {
  fetchRooms()
}

// 选择会议室
const selectRoom = (room: ConferenceRoom) => {
  // 检查时间重叠
  if (props.startTime && props.endTime) {
    // 查找是否有时间重叠的活动
    const hasTimeOverlap = checkTimeOverlap(room.activityInfos || [])

    if (hasTimeOverlap) {
      // 如果存在重叠，检查是否是编辑模式
      const isEditMode = room.activityInfos?.some((activity) => activity.id === props.editActivityId)

      if (!isEditMode) {
        ElMessage.warning('该时间段已被预约，请选择其他会议室或时间段')
        return
      }
      // 如果是编辑模式，允许继续选择
    }
  }

  emit('update:modelValue', room.id)
  emit('room-selected', room)
}

// 检查时间重叠
const checkTimeOverlap = (activities: ActivityInfo[]) => {
  if (activities.length === 0 || !props.startTime || !props.endTime) {
    return false
  }

  // 将当前选择的时间转换为Date对象
  const currentStart = convertToDateTime(props.startTime)
  const currentEnd = convertToDateTime(props.endTime)

  // 检查是否与任何现有活动重叠
  return activities.some((activity) => {
    // 跳过当前正在编辑的预约
    if (activity.id === props.editActivityId) {
      return false
    }

    const activityStart = convertToDateTime(activity.startTime)
    const activityEnd = convertToDateTime(activity.endTime)

    // 检查时间重叠
    return !(currentEnd <= activityStart || currentStart >= activityEnd)
  })
}

// 将时间字符串转换为Date对象
const convertToDateTime = (timeString: string) => {
  // 如果时间字符串已包含日期部分，直接使用
  // 否则，添加当前选择的日期
  const fullTimeString = timeString.includes(' ') ? timeString : `${filterParams.date} ${timeString}`

  return new Date(fullTimeString.replaceAll('-', '/'))
}

// 禁用过去的日期
const disablePastDates = (time) => {
  return time.getTime() < Date.now() - 8.64e7 // 不允许选择昨天及以前的日期
}

// 计算时间在时间线上的位置（百分比）
const calculateTimePosition = (hour: number, minute: number) => {
  // 安全解析配置的开始和结束时间
  const startTimeStr = timeConfig.value?.startTime || '08:00'
  const endTimeStr = timeConfig.value?.endTime || '18:00'

  const startTimeParts = startTimeStr.split(':')
  const endTimeParts = endTimeStr.split(':')

  const startHour = parseInt(startTimeParts[0] || '8')
  const startMinute = parseInt(startTimeParts[1] || '0')
  const endHour = parseInt(endTimeParts[0] || '18')
  const endMinute = parseInt(endTimeParts[1] || '0')

  // 容错处理
  if (hour < startHour) {
    hour = startHour
    minute = startMinute
  }
  if (hour > endHour || (hour === endHour && minute > endMinute)) {
    hour = endHour
    minute = endMinute
  }

  // 计算总分钟数
  const totalMinutes = (endHour - startHour) * 60 + (endMinute - startMinute)
  // 计算当前分钟数
  const currentMinutes = (hour - startHour) * 60 + (minute - startMinute)

  return Math.max(0, Math.min(100, (currentMinutes / totalMinutes) * 100))
}

// 初始加载
onMounted(async () => {
  try {
    // 首先获取时间配置
    await fetchTimeConfig()

    // 配置加载完成后再获取会议室列表
    if (props.startTime && props.endTime) {
      // 确保日期参数正确
      if (props.startTime.includes(' ')) {
        const startDate = props.startTime.split(' ')[0]
        filterParams.date = startDate
      }
      fetchRooms()
    }
  } catch (error) {
    console.error('组件初始化错误:', error)
    ElMessage.error('初始化失败，请刷新页面重试')
  }
})

// 确认选择
const confirmSelection = () => {
  const selectedRoom = roomList.value.find((room) => room.id === props.modelValue)
  if (selectedRoom) {
    confirmedRoom.value = selectedRoom
    ElMessage.success('会议室选择成功')
  }
}

// 重置选择
const resetSelection = () => {
  confirmedRoom.value = null
  emit('update:modelValue', '')
}

// 已选择的会议室
const confirmedRoom = ref<ConferenceRoom | null>(null)

// 监听 roomList 和 modelValue，编辑时自动渲染已选会议室
watch(
  [() => roomList.value, () => props.modelValue],
  ([rooms, selectedId]) => {
    if (selectedId && rooms && rooms.length > 0) {
      const found = rooms.find((room) => room.id == selectedId)
      if (found) {
        confirmedRoom.value = found
      }
    }
  },
  { immediate: true }
)
</script>

<style scoped>
.page-chosemeeting {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #f5f7fa;
}

/* 筛选区域样式 - 支持折叠功能 */
.filter-section {
  margin-bottom: 6px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}

.filter-collapsed .filter-header {
  border-bottom: none;
}

.filter-content {
  padding: 8px 12px;
  transition: all 0.3s ease;
}

.collapse-icon {
  font-size: 14px;
  color: #909399;
  transition: transform 0.3s;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.filter-form .el-form-item {
  margin-right: 8px;
  margin-bottom: 0;
}

/* 会议室列表 */
.room-list {
  flex: 1;
  height: calc(100vh - 180px);
  max-height: 600px;
  padding: 0 5px;
  overflow-y: auto;
}

.room-list-container {
  padding: 5px 0;
}

/* 会议室条目 - 更紧凑的设计 */
.room-item {
  position: relative;
  padding: 8px;
  margin-bottom: 4px;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all 0.2s;
}

/* 会议室信息区域 - 更紧凑的两列布局 */
.room-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.room-info-left {
  flex: 1;
  min-width: 0;
}

.room-info-right {
  flex: 0 0 auto;
  margin-left: 8px;
  text-align: right;
}

/* 会议室标题行 */
.room-title {
  display: flex;
  gap: 4px;
  align-items: center;
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  color: #303133;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 会议室元信息行 */
.room-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 2px;
  font-size: 11px;
  color: #606266;
}

.room-location,
.room-capacity {
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-location .el-icon,
.room-capacity .el-icon {
  margin-right: 2px;
  font-size: 11px;
  color: #909399;
}

.room-equipment {
  max-width: 120px;
  overflow: hidden;
  font-size: 11px;
  color: #909399;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 状态标签 */
.conflict-tag,
.approval-tag {
  padding: 0 3px;
  font-size: 10px;
  font-weight: normal;
  line-height: 1.4;
  border-radius: 2px;
}

.conflict-tag {
  color: white;
  background-color: #f56c6c;
}

.approval-tag {
  color: white;
  background-color: #e6a23c;
}

/* 选中和不可用状态 */
.room-selected {
  border-color: #409eff;
}

.room-unavailable {
  background-color: #fffdf8;
  border-color: #f3e7d3;
}

/* 时间线包装器 */
.timeline-wrapper {
  margin: 2px 0 4px;
}

/* 时间刻度标记 */
.time-marks {
  position: relative;
  display: flex;
  height: 12px;
  margin-bottom: 10px;
}

.time-mark {
  position: absolute;
  font-size: 10px;
  color: #909399;
  transform: translateX(-50%);
}

/* 时间线 */
.timeline {
  position: relative;
  height: 12px;
  margin: 0;
}

.timeline-bg {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 3px;
  background-color: #e4e7ed;
  border-radius: 2px;
  transform: translateY(-50%);
}

.time-dot {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 4px;
  height: 4px;
  background-color: #c0c4cc;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.timeline-occupied {
  position: absolute;
  top: 50%;
  z-index: 2;
  height: 3px;
  background-color: #f56c6c;
  border-radius: 2px;
  transform: translateY(-50%);
}

.timeline-selected {
  position: absolute;
  top: 50%;
  z-index: 3;
  height: 3px;
  background-color: #409eff;
  border-radius: 2px;
  transform: translateY(-50%);
}

/* 时间信息 - 更紧凑 */
.room-time-info {
  font-size: 11px;
  color: #606266;
}

.time-info {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
}

.time-label {
  color: #909399;
}

.time-slot {
  margin-right: 2px;
  color: #f56c6c;
}

.time-info.available {
  color: #67c23a;
}

/* 加载和无数据状态 */
.loading-rooms,
.no-rooms {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .room-list {
    height: calc(100vh - 150px);
    padding: 0 3px;
  }

  .room-item {
    padding: 6px;
  }

  .filter-form {
    flex-direction: column;
    align-items: flex-start;
  }

  .filter-form .el-form-item {
    width: 100%;
    margin-bottom: 6px;
  }

  .room-info {
    flex-direction: column;
  }

  .room-info-right {
    margin-top: 2px;
    margin-left: 0;
    text-align: left;
  }

  .room-equipment {
    max-width: 100%;
  }
}

/* 添加状态标签样式 */
.status-tag {
  padding: 0 3px;
  margin-left: 4px;
  font-size: 10px;
  font-weight: normal;
  line-height: 1.4;
  border-radius: 2px;
}

.status-idle {
  color: white;
  background-color: #67c23a;
}

.status-unopen {
  color: white;
  background-color: #909399;
}

/* 已选择卡片 */
.selected-room-card {
  padding: 10px 14px 8px 14px;
  margin-top: 10px;
  background: #f7f9fa;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.selected-room-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.selected-room-icon {
  margin-right: 6px;
  color: #409eff;
}
.selected-room-name {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: #222;
}
.selected-room-reset {
  padding: 0 6px;
  font-size: 13px;
  color: #409eff;
}
.selected-room-info {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  font-size: 13px;
  color: #666;
}
.selected-room-meta {
  display: flex;
  gap: 3px;
  align-items: center;
}
.selected-room-meta .el-icon {
  font-size: 13px;
  color: #b1b3b8;
}
</style>
